//引入组件
import React,{ Component } from 'react'
import './index.css'

export default class Footer extends Component{

	// 全选事件处理
	handelAllCheck=(event)=>{
		this.props.selectAll(event.target.checked)
	}

	// 清除已完成的任务
	handelClearAllisDone = ()=>{
		this.props.clearAllisDone()
	}

    render(){
		const { todos } = this.props;
		//  已完成的todos
		const isDoneTodos = todos.reduce( (pre,todosObj) => pre + ( todosObj.isDone ? 1 : 0 ),0)
		// 全部的todos
		const allTodos = todos.length;
        return(
            <div className="footer">
				<div>
					<input type="checkbox" checked={ isDoneTodos === allTodos && allTodos !==0 ? true : false } onChange={ this.handelAllCheck }  />
					<label>&nbsp;&nbsp;已完成{ isDoneTodos } / 全部 { allTodos }</label>
				</div>
				<input onClick={ this.handelClearAllisDone } type="button" value="清除已完成的任务" />
			</div>
        )
    }
}